<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="用户搜索">
          <el-input v-model="state.params.key_word" clearable placeholder="请输入用户昵称、手机号" />
        </el-form-item>

        <el-form-item label="会员类型">
          <el-select v-model="state.params.level">
            <el-option v-for="(o, i) in vipLevelOptions" :key="i" :value="o.value" :label="o.label" />
          </el-select>
        </el-form-item>

        <el-form-item label="1级渠道">
          <el-input v-model="state.params.utm_source" clearable placeholder="请输入1级渠道" />
        </el-form-item>

        <el-form-item label="2级渠道">
          <el-input v-model="state.params.utm_term" clearable placeholder="请输入2级渠道" />
        </el-form-item>

        <el-form-item label="注册时间">
          <el-date-picker
            v-model="state.params._dateRange"
            :disabled="state.params.user_label > 0"
            :shortcuts="dateShortcut"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="methods.onSearch"
          />
        </el-form-item>
      </k-search>
    </div>

    <div class="base-block">
      <KTable v-bind="tableState" v-on="tableEvent">
        <template #actions="s">
          <el-link type="primary" @click="onClickEdit(s.row)">编辑</el-link>
        </template>
      </KTable>
    </div>
    <EditDrawer ref="editModalRef" @after-submit="handleAfterSubmit" />
  </PageListContainer>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { vipLevelOptions, useTableList } from './hooks/use-table';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';
import EditDrawer from './components/edit-drawer.vue';
import { AuthCode, hasPermission } from '@/modules/auth';

defineOptions({ name: 'DyjUserList' });

const { state, tableState, tableEvent, ...methods } = useTableList({});

// 新增编辑公用一个弹框；
const editModalRef = ref();

const onClickEdit = (row: any) => {
  if (hasPermission(AuthCode.CY_EDIT_USER_NAME)) {
    editModalRef.value.show(1, row);
  }
};
/** 关闭抽屉后的回调 */
const handleAfterSubmit = () => {
  methods.onSearch();
};

</script>
